<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>省市县三级联动案例</title>
	<link rel="stylesheet" href="./css/index.css" />
</head>

<body>
	<div class="list-box">
		<div class="item">
			<span>省份：</span>
			<select id="province">
				<option value="">请选择省份</option>
			</select>
		</div>
		<div class="item">
			<span>城市：</span>
			<select id="city">
				<option value="">请选择城市</option>
			</select>
		</div>
		<div class="item">
			<span>区县：</span>
			<select id="county">
				<option value="">请选择区县</option>
			</select>
		</div>
	</div>
</body>
<script src="./lib/axios.js"></script>
<script>
	//1.封装获取元素的函数
	function qs(ele) {
		return document.querySelector(ele)
	}
	//2.配置请求跟路径
	axios.defaults.baseURL = 'http://124.223.14.236:3001/api'

	//.初始化数据 
	async function render() {
		//——————————————————————————————————————————————————————————————————————————
		//3-1.发起请求,获取数据
		const {
			data: {
				data: provinceData
			}
		} = await axios.get('/city/province')
		//console.log(provinceData);
		//3-2.通过map+join将数据渲染到页面上
		const provinceStr = provinceData.map(item => {
			return `
								<option value="${item.province}">${item.name}</option>
							`
		}).join('')
		qs('#province').innerHTML = '<option value="">请选择省份</option>' + provinceStr
		//3-3.设置省下拉框的默认选项
		qs('#province').value = '34'

		//——————————————————————————————————————————————————————————————————————————
		//4-1.发起请求,获取数据
		const {
			data: {
				data: cityData
			}
		} = await axios.get('/city/city', {
			params: {
				provinceCode: '34'
			}
		})
		//console.log(cityData);
		//4-2.通过map+join将数据渲染到页面上
		const cityStr = cityData.map(item => {
			return `
			<option value="${item.city}">${item.name}</option>
			`
		}).join('')
		qs('#city').innerHTML = '<option value="">请选择区县</option>' + cityStr
		//4-3.设置城市下拉框的默认选项
		qs('#city').value = '01'

		//————————————————————————————————————————————————————————————————————————————
		//4-1.发起请求,获取数据
		const {
			data: {
				data: areaData
			}
		} = await axios.get('/city/area', {
			params: {
				provinceCode: '34',
				cityCode: '01'
			}
		})
		//console.log(areaData);
		//4-2.通过map+join将数据渲染到页面上
		const areaStr = areaData.map(item => {
			return `
			<option value="${item.area}">${item.name}</option>
			`
		}).join('')
		qs('#county').innerHTML = '<option value="">请选择省份</option>' + areaStr
		//4-3.设置区下拉框的默认选项
		qs('#county').value = '02'
	}
	render()

	//5.change监听省数据下拉框的变化，市数据响应发生变化
	qs('#province').addEventListener('change', async function () {
		const {
			data: {
				data: cityData
			}
		} = await axios.get('/city/city', {
			params: {
				provinceCode: qs('#province').value
			}
		})
		const cityStr = cityData.map(item => {
			return `
		<option value="${item.city}">${item.name}</option>
		`
		}).join('')
		qs('#city').innerHTML = '<option value="">请选择城市</option>' + cityStr
		qs('#county').innerHTML='<option value="">请选择区县</option>'
	})

	//6.change事件监听市数据下拉框的变化，区数据发生相应变化
	qs('#city').addEventListener('change', async function () {
		const {
			data: {
				data: areaData
			}
		} = await axios.get('/city/area', {
			params: {
				provinceCode: qs('#province').value,
				cityCode: qs('#city').value
			}
		})
		const areaStr = areaData.map(item => {
			return `
				<option value="${item.area}">${item.name}</option>
			`
		}).join('')
		qs('#county').innerHTML = '<option value="">请选择区县</option>' + areaStr
	})
</script>

</html>